<template>
	<view class="header-layout">
		<view class="navi-bar" :style="{'background-color': showBgColor ? '#0051FE' : ''}">
			<view class="status-bar" :style="{height:getStatusBarHeight() + 'px'}"></view>
			<view class="title-bar" :style="{height:getTitleBarHeight() + 'px'}">
				<navigator class="navigator" open-type="navigateBack" v-if="showBack">
					<uni-icons type="left" size="18" class="icon" color="#fff"></uni-icons>
				</navigator>
				<view>{{ title }}</view>
			</view>
		</view>
		<view class="fill" :style="{height: (getStatusBarHeight() + getTitleBarHeight()) + 'px'}"></view>
	</view>
</template>

<script setup>
	import { getStatusBarHeight, getTitleBarHeight } from '@/utils/system.js';
	defineProps({
		title: {
			type: String,
			default: '',
		},
		showBgColor: {
			type: Boolean,
			default: false,
		},
		showBack: {
			type: Boolean,
			default: false
		}
	});
</script>

<style lang="scss" scoped>
	.header-layout {
		z-index: 2;
		.navi-bar {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			flex-direction: column;
			background-color: inherit;
			.status-bar {
				background-color: inherit;
			}
			.title-bar {
				display: flex;
				align-items: center;
				color: white;
				padding-left: 48rpx;
				font-size: 32rpx;
				font-weight: 400;
				.navigator {
					display: inline-flex;
				}
				.icon {
					height: 24rpx;
					line-height: 24rpx;
					margin-right: 16rpx;
				}
			}
		}
	}
</style>